<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>wel</title>
    <script type="application/javascript" src="//cdn.jsdelivr.net/npm/clappr@latest/dist/clappr.min.js"></script>
    <script type="text/javascript"
            src="//cdn.jsdelivr.net/gh/clappr/clappr-level-selector-plugin@latest/dist/level-selector.min.js"></script>
    <script type="text/javascript"
            src="//cdn.jsdelivr.net/clappr.thumbnails-plugin/latest/clappr-thumbnails-plugin.js"></script>
</head>
<body>
<div id="player"></div>

</body>
<script>
    var player = new Clappr.Player({
        source: "123.AUDIO.m3u8", parentId: "#player",
        plugins: [Clappr.FlasHLS, LevelSelector, ClapprThumbnailsPlugin],
        height: 340,
        autoPlay: true,
        width: 528,
        levelSelectorConfig: {
            title: 'Quality',
            labelCallback: function (playbackLevel, customLabel) {
                return playbackLevel.level.height + 'p'; // High 720p
            }
        },
        scrubThumbnails: {
            backdropHeight: 64,
            spotlightHeight: 84,
            thumbs: []
        }
    });
</script>
</html>